<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="common.css">
<script src="common.js"></script>
<script src="../dist/jslib.min.js"></script>
</head>
<body>
	<a name="tableCells"></a>
	<h1>$js().tableCells</h1>
	<h2>定义</h2>
	<p>$js().tableCells(opts) : JSLib</p>
	<h2>参数</h2>
	<table>
		<tr>
			<td>opts</td>
			<td>[可选]附加参数。</td>
		</tr>
		<tr>
			<td>opts.only_td=false|true</td>
			<td>[可选]仅响应td元素的操作。加上这个以后，选择单元格时如果点选的是非TD元素，则不立即进行响应。</td>
		</tr>
	</table>
	<h2>说明</h2>
	<p>对匹配的TABLE节点，增加区域选择、复制、粘贴功能。</p>
	<h2>示例</h2>
	<fieldset>
		<legend>HTML</legend>
		<pre>&lt;table border=&quot;1&quot;&gt;<br>	&lt;tr&gt;<br>		&lt;th&gt;Head1&lt;/th&gt;<br>		&lt;th&gt;Head2&lt;/th&gt;<br>		&lt;th&gt;Head3&lt;/th&gt;<br>		&lt;th&gt;Head4&lt;/th&gt;<br>		&lt;th&gt;Head5&lt;/th&gt;<br>	&lt;/tr&gt;<br>	&lt;tr&gt;<br>		&lt;td&gt;row 1 col 1&lt;/td&gt;<br>		&lt;td contentEditable=&quot;true&quot;&gt;row 1 col 2&lt;/td&gt;<br>		&lt;td&gt;row 1 col 3&lt;/td&gt;<br>		&lt;td&gt;row 1 col 4&lt;/td&gt;<br>		&lt;td&gt;row 1 col 5&lt;/td&gt;<br>	&lt;/tr&gt;<br>	&lt;tr&gt;<br>		&lt;td&gt;row 2 col 1&lt;/td&gt;<br>		&lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;row 2 col 2&quot;&gt;&lt;/td&gt;<br>		&lt;td rowspan=&quot;2&quot;&gt;row 2 col 3&lt;/td&gt;<br>		&lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;row 2 col 4&quot;&gt;&lt;/td&gt;<br>		&lt;td rowspan=&quot;4&quot;&gt;row 2 col 5&lt;/td&gt;<br>	&lt;/tr&gt;<br>	&lt;tr&gt;<br>		&lt;td&gt;row 3 col 1&lt;/td&gt;<br>		&lt;td&gt;row 3 col 2&lt;/td&gt;<br>		&lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;row 3 col 4&quot;&gt;&lt;/td&gt;<br>	&lt;/tr&gt;<br>	&lt;tr&gt;<br>		&lt;td&gt;row 4 col 1&lt;/td&gt;<br>		&lt;td colspan=&quot;3&quot;&gt;row 4 col 2&lt;/td&gt;<br>	&lt;/tr&gt;<br>	&lt;tr&gt;<br>		&lt;td&gt;row 5 col 1&lt;/td&gt;<br>		&lt;td&gt;row 5 col 2&lt;/td&gt;<br>		&lt;td&gt;row 5 col 3&lt;/td&gt;<br>		&lt;td&gt;row 5 col 4&lt;/td&gt;<br>	&lt;/tr&gt;<br>&lt;/table&gt;</pre>
	</fieldset>
	<fieldset>
		<legend>JavaScript</legend>
		<pre>$js('table').tableCells();</pre>
	</fieldset>
	<h2>演示</h2>
	<fieldset>
		<legend>表格区域选择、复制、粘贴</legend>
		<table border="1">
			<tr>
				<th>Head1</th>
				<th>Head2</th>
				<th>Head3</th>
				<th>Head4</th>
				<th>Head5</th>
			</tr>
			<tr>
				<td>row 1 col 1</td>
				<td contentEditable="true">row 1 col 2</td>
				<td>row 1 col 3</td>
				<td>row 1 col 4</td>
				<td>row 1 col 5</td>
			</tr>
			<tr>
				<td>row 2 col 1</td>
				<td><input type="text" value="row 2 col 2" size="8"></td>
				<td rowspan="2">row 2 col 3</td>
				<td><input type="text" value="row 2 col 4" size="8"></td>
				<td rowspan="4">row 2 col 5</td>
			</tr>
			<tr>
				<td>row 3 col 1</td>
				<td>row 3 col 2</td>
				<td><input type="text" value="row 3 col 4" size="8"></td>
			</tr>
			<tr>
				<td>row 4 col 1</td>
				<td colspan="3">row 4 col 2</td>
			</tr>
			<tr>
				<td>row 5 col 1</td>
				<td>row 5 col 2</td>
				<td>row 5 col 3</td>
				<td>row 5 col 4</td>
			</tr>
		</table>
		<p>使用鼠标划区，可以直接选择多个单元格区域。</p>
		<p>使用Ctrl+C可对选择的单元格内容进行复制，复制后的内容可以直接贴到其他软件，例如Excel等。</p>
		<p>使用Ctrl+V可对选择的单元格内容进行粘贴，粘贴内容可以是其他表格内容，也可以是来自其他软件的数据，例如Excel等。</p>
		<p>在进行粘贴操作时，只会填充单元格中的文本框或可编辑单元格。</p>
		<p>粘贴数据的第一个单元格，默认为已选中的第一个单元格。如果当前表格没有选中，则当前光标所在单元格做为默认单元格。</p>
	</fieldset>
	<h2>版本</h2>
	<p>本属性自0.0.0版本开始支持。</p>
	<p>本属性自1.0.3版本开始支持opts.only_td参数。</p>
	<script>
		$js('table').tableCells();
	</script>
</body>
</html>